<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/registerbootstrap/bootstrap.4.6.min.css">
    <link rel="stylesheet" href="/static/registerstatic/css/init.css">
    <style>
        /* 新增背景样式 */
        body {
            background-image: url('../static/images/bg.jpg'); /* 确保路径正确 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
            position: relative;
        }
        /* 背景遮罩层 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.88);
            z-index: -1;
        }
        /* 导航栏优化 */
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px);
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        /* 导航按钮颜色调整为商务风格 */
        .nav-link {
            transition: all 0.3s ease;
            border-radius: 8px;
            margin: 0 5px;
            padding: 0.5rem 1.2rem !important;
            color: #343a40; /* 深灰色文字 */
        }
        .nav-link:hover {
            background: #007bff33; /* 浅蓝色背景 */
            color: #212529; /* 深色文字在悬停时 */
            transform: translateY(-1px);
        }
        .nav-link.active, .nav-link:focus {
            background: #0056b333; /* 更深的蓝色背景 */
            color: #ffffff; /* 白色文字 */
        }
        /* 内容容器优化 */
        .container {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 12px;
            padding: 2rem;
            margin-top: 2rem;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
            position: relative;
            z-index: 1;
        }
        /* 品牌文字美化 */
        .navbar-brand {
            font-weight: 600;
            letter-spacing: 0.5px;
            color: #2c3e50 !important;
            font-size: 1.25rem;
        }
        /* 响应式优化 */
        @media (max-width: 768px) {
            .container {
                margin: 1rem;
                padding: 1.5rem;
                border-radius: 8px;
            }
            .navbar-brand {
                font-size: 1.1rem;
            }
            .nav-link {
                padding: 0.5rem 1rem !important;
            }
        }
    </style>
    {% block head %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">商务汉语教学及评测平台</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/first">
                            <i class="fas fa-home mr-1"></i>
                            首页 <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <!-- 可以添加更多导航项 -->
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        {% block body %}{% endblock %}
    </div>
    <!-- 加载Font Awesome -->
    <script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
</body>
</html>